﻿@{
    ViewBag.Title = "Edit";
}
<div class="container">
    <div class="row">
        <form class="form-horizontal bv-form" id="mainForm">
            <div class="form-group col-lg-12 col-sm-12 has-feedback" style="margin-bottom:30px;">
                <label class="col-lg-2 col-sm-2 control-label"><em class="required">*</em>新闻标题：</label>
                <div class="col-lg-9 col-sm-9">
                    <input type="text" class="form-control" name="NewsTitle" id="NewsTitle" value="@Model.NewsTitle" placeholder="请输新闻标题" style="margin-left:-4px;" data-bv-field="Code"><i class="form-control-feedback" data-bv-icon-for="Code" style="display: none;"></i>
                    <small class="help-block" data-bv-validator="notEmpty" data-bv-for="Code" data-bv-result="NOT_VALIDATED" style="display: none;">标题不能为空</small>
                    <input type="hidden" name="Id" id="Id" value="@Model.Id" />
                </div>
            </div>
            <div class="form-group col-lg-12 col-sm-12">
                <label class="col-lg-2 col-sm-2 control-label" style="margin-left:-3px;"><em class="required">*</em>新闻类型 : </label>
                <div class="col-lg-9 col-sm-9">
                    @Html.DropDownList("SelNewsTypeName", null, new { @class = "form-control selectpicker  show-tick" })
                    <input type="hidden" id="NewsTypeId" name="NewsTypeId" value="@Model.NewsTypeId" />
                    <input type="hidden" id="NewsTypeName" name="NewsTypeName" value="@Model.NewsTypeName" />

                </div>
            </div>
            <div class="form-group col-lg-12 col-sm-12 mb25" style="margin-bottom:30px;">
                <label class="col-lg-2 col-sm-2 control-label"><em class="required">*</em>摘要 : </label>
                <div class="col-lg-9 col-sm-9" style="padding-left: 10px; padding-right: 20px;">
                    <textarea name="ShortDesc" id="ShortDesc" class="form-control" style="width:100%;min-height:100px;padding:5px 10px;border-color: #ccc" placeholder="请输入摘要">@Model.ShortDesc</textarea>
                    <small class="help-block" data-bv-validator="notEmpty" data-bv-for="Description" data-bv-result="NOT_VALIDATED" style="display: none;">说明不能为空</small>
                </div>
            </div>
            <div class="form-group col-lg-12 col-sm-12 has-feedback" style="margin-bottom:30px;">
                <label class="col-lg-2 col-sm-2 control-label">来源：</label>
                <div class="col-lg-9 col-sm-9">
                    <input type="text" class="form-control" name="Source" id="Source" value="@Model.Source" placeholder="请输入来源" style="margin-left:-4px;" data-bv-field="Name"><i class="form-control-feedback" data-bv-icon-for="Name" style="display: none;"></i>
                    <small class="help-block" data-bv-validator="notEmpty" data-bv-for="Name" data-bv-result="NOT_VALIDATED" style="display: none;">标题不能为空</small>
                </div>
            </div>
            <div class="form-group col-lg-12 col-sm-12 has-feedback" style="margin-bottom:30px;">
                <label class="col-lg-2 col-sm-2 control-label"><em class="required">*</em>排序：</label>
                <div class="col-lg-9 col-sm-9">
                    <input type="text" class="form-control" name="Sort" id="Sort" value="@Model.Sort" placeholder="请输入排序" style="margin-left:-4px;" data-bv-field="Name"><i class="form-control-feedback" data-bv-icon-for="Name" style="display: none;"></i>
                    <small class="help-block" data-bv-validator="notEmpty" data-bv-for="Name" data-bv-result="NOT_VALIDATED" style="display: none;">标题不能为空</small>
                </div>
            </div>
            <div class="form-group col-lg-12 col-sm-12 mb25" style="margin-bottom:30px;">
                <label class="col-lg-2 col-sm-2 control-label"><em class="required">*</em>内容 : </label>
                <div class="col-lg-9 col-sm-9" style="padding-left: 10px; padding-right: 20px;">
                    <script type="text/plain" id="editor" style="height:200px">
                        @Html.Raw(Model.Content)
                    </script>
                    <input type="text" name="Content" id="Content" class="form-control" style="width:0px;height:0px;border:0px;" />
                </div>
            </div>

            <div class="form-group col-lg-12 col-sm-12">
                <label class="col-lg-2 col-sm-2 control-label" style="margin-left:-14px;width: 135px;"><em class="required">*</em>是否图片显示 : </label>
                <div class="col-lg-9 col-sm-9">
                    <select class="form-control selectpicker  show-tick" id="IsImgShow" name="IsImgShow" tabindex="-98">
                        @if (Model.IsImgShow == true)
                        {
                            <option value="true" selected>是</option>
                            <option value="false">否</option>
                        }
                        else {
                            <option value="false" selected>否</option>
                            <option value="true">是</option>
                        }
                    </select>
                </div>
            </div>

            <div class="form-group col-lg-12 col-sm-12 has-feedback" style="margin-bottom:10px;">
                <label class="layui-form-label" style="font-weight:bold;margin-right:10px;"><em class="required"></em>图片附件：</label>
                <div style="width:100%;" id="fileList">
                </div>
            </div>
            <div class="layui-block col-sm-5">
                <div style="width:100%;display:none;margin-left:120px;" id="fileBar">
                    <div class="layui-progress" lay-showpercent="true" lay-filter="fileProgress"><div class="layui-progress-bar" lay-percent="0%" style="width: 0%;"><span class="layui-progress-text">NaN%</span></div></div>
                </div>
                <input type="hidden" name="fileDataJson" id="fileDataJson">
            </div>
            <div class="layui-form-item ">
                <div class="layui-form-item menue">
                    <div class="layui-inline col-sm-6" style="margin-left:120px">
                        <div class="layui-input-inline">
                            <button class="layui-btn layui-btn-primary " id="btnSelect" style="position: relative; z-index: 1;">
                                <i class="layui-icon" style="font-size:30px;"></i>
                            </button>
                            <button class="layui-btn layui-btn-primary " id="btnUpload" style="margin:0">
                                <i class="layui-icon" style="font-size:30px;"></i>
                            </button>
                            <div id="html5_1cc562u8f6oj148f1162ngkih33_container" class="moxie-shim moxie-shim-html5" style="position: absolute; top: 0px; left: 0px; width: 71px; height: 38px; overflow: hidden; z-index: 0;">
                                <input id="html5_1cc562u8f6oj148f1162ngkih33" type="file" style="font-size: 999px; opacity: 0; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;" accept="image/jpeg,image/gif,image/png,application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document">
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="form-group col-lg-12 col-sm-12">
                <label class="col-lg-2 col-sm-2 control-label" style="margin-left:-3px;"><em class="required">*</em>是否置顶 : </label>
                <div class="col-lg-3 col-sm-3">
                    <select class="form-control selectpicker  show-tick" id="IsTop" name="IsTop" tabindex="-98">
                        @if (@Model.IsTop == true)
                        {
                            <option value="true" selected>是</option>
                            <option value="false">否</option>
                        }
                        else {
                            <option value="false" selected>否</option>
                            <option value="true">是</option>
                        }
                    </select>
                </div>
                <label class="col-lg-3 col-sm-3 control-label"><em class="required">*</em>是否发布 : </label>
                <div class="col-lg-3 col-sm-3">
                    <select class="form-control selectpicker  show-tick" id="IsPublish" name="IsPublish" tabindex="-98">
                        @if (@Model.IsPublish == true)
                        {
                            <option value="true" selected>是</option>
                            <option value="false">否</option>
                        }
                        else {
                            <option value="false" selected>否</option>
                            <option value="true">是</option>
                        }
                    </select>
                </div>
            </div>
            <div class="col-lg-12 col-sm-12" style="margin-top:25px">
                <div class="col-lg-6 col-sm-6" style="text-align:right;margin-bottom:10px">
                    <input type="button" name="save" id="save" lay-submit="" lay-filter="sub" value="保&nbsp;&nbsp;&nbsp;存" class="layui-btn layui-btn-small button-base bg-save">
                </div>
                <div class="col-lg-6 col-sm-6" style="margin-bottom:10px">
                    <input type="button" name="close" value="关&nbsp;&nbsp;&nbsp;闭" class="cancel layui-btn layui-btn-small button-base bg-cancel ">
                </div>
            </div>
        </form>
    </div>
</div>
<script>
    //富文本编辑器实例化
    var ue = UE.getEditor('editor');
    //编辑器内容同步input
    editor = UE.getEditor("editor", {
        //initialFrameHeight: 40
    }).ready(function () {
        var editor = UE.getEditor("editor");
        /*找到UEditor的iframe*/
        var contents = $('#editor').find('iframe').contents();

        var con = UE.getEditor("editor").getContent();
        $("#Content").val(con);
        var fn = function () {
            $("#Content").val(UE.getEditor("editor").getContent());
            $('#mainForm').data('bootstrapValidator')//重新验证inputName
             .updateStatus('Content', 'NOT_VALIDATED', null)
             .validateField('Content');
        }
        if (document.all) {//document.all识别是否在IE下，在IE下为true
            contents.get(0).attachEvent('onpropertychange', function (e) {
                fn();
            });
        } else {
            contents.on('input', fn);
        }
    });

    var newsTypeId = $("#NewsTypeId").val();
    $("#SelNewsTypeName").val(newsTypeId);

    layui.use(['layer', 'form', 'element', 'laypage'], function () {
        var layer = layui.layer, form = layui.form, element = layui.element, $ = layui.jquery, laypage = layui.laypage;
        var fileDataArray = [];
        var fileDataJson = [];
        //获取图片附件
        $.post("/Files/GetFileList", { tableName: 'Epm_News', id: '@Model.Id', }, function (data) {
            if (data.Flag) {
                if (data.Data.length > 0) {
                    for (var i = 0; i < data.Data.length; i++) {

                        if (item.ImageType == null) {
                            var odiv = '<img src="' + data.Data[i].Url + '" alt="" id="ImgShow" style="width: 100px;height: 100px;" />';
                            $('#fileList').html(odiv);
                        }

                        var obj = {};//将三个文件信息序列化在全文隐藏域内
                        obj.GuidId = data.Data[i].FileGuid;
                        obj.Name = data.Data[i].Name;
                        obj.Size = data.Data[i].Size;
                        obj.FileGuid = data.Data[i].FileGuid;
                        obj.Url = data.Data[i].Url;
                        obj.ImageType = data.Data[i].ImageType;

                        fileDataArray.push(obj);
                    }
                    fileDataJson = JSON.stringify(fileDataArray);
                    $("#fileDataJson").val(fileDataJson);
                }
            } else {
                parent.layer.alert(data.Message, { icon: 2 });
            }
        });

        //自定义验证规则
        $('#mainForm').bootstrapValidator({
            excluded: [':hidden'],//[':disabled', ':hidden', ':not(:visible)'] //设置隐藏组件可验证
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                NewsTitle: {
                    validators: {
                        notEmpty: {
                            message: '新闻标题不能为空'
                        },
                        stringLength: {
                            max: 254,
                            message: '新闻标题长度不能超过254字符'
                        },
                    }
                },
                NewsTypeName: {
                    validators: {
                        notEmpty: {
                            message: '新闻类型名称不能为空'
                        },
                        stringLength: {
                            max: 100,
                            message: '新闻类型不能超过100字符'
                        },
                    }
                },
                ShortDesc: {
                    validators: {
                        notEmpty: {
                            message: '摘要不能为空'
                        }, stringLength: {
                            max: 254,
                            message: '摘要不能超过254字符'
                        },
                    }
                },
                Content: {
                    validators: {
                        notEmpty: {
                            message: '内容不能为空'
                        }
                    }
                },
                Source: {
                    validators: {
                        stringLength: {
                            max: 254,
                            message: '来源不能超过254字符'
                        },
                    }
                },
                Sort: {
                    validators: {
                        notEmpty: {
                            message: '排序不能为空'
                        },
                        stringLength: {
                            max: 10,
                            message: '排序不能超过10字符'
                        }, regexp: {
                            regexp: /^[0-9]+$/i,
                            message: "排序由数字组成"
                        }
                    }
                },
            }
        });

        //监听提交
        form.on('submit(sub)', function (data) {
            var IsImgShow = $("#IsImgShow").val();
            if (IsImgShow == "true") {
                var files = $("#fileDataJson").val();
                if (files == "" || files == null) {
                    parent.layer.alert("请上传附件", { icon: 2 });
                    return;
                }
            }
            var newsTypeId = $('#SelNewsTypeName option:selected').val();
            $("#NewsTypeId").val(newsTypeId);

            var newsTypeName = $('#SelNewsTypeName option:selected').text();
            $("#NewsTypeName").val(newsTypeName);
            if (newsTypeName == "" || newsTypeName == "请选择") {
                parent.layer.alert("请选择新闻类型", { icon: 2 });
                return;
            }
            //对表单进行验证
            var bv = $('#mainForm').data('bootstrapValidator');
            bv.validate();
            if (bv.isValid()) {
                var search = $("form").serialize();
                $.post("Edit", search, function (data) {
                    if (data.Flag) {
                        parent.layer.msg("资料编辑成功", { time: 1000, icon: 1 }, function () {
                            var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                            parent.layer.close(index);//关闭窗口
                            parent.window.frames["mainFrame"].location.reload();
                        });
                    } else {
                        layer.alert(data.Message, { icon: 2 });
                    }
                });
                return true;
            } else {
                parent.layer.alert("请检查必填项是否填写完整。", { icon: 2 });
            }
            return false;
        });
        //图标上传
        var uploader = new plupload.Uploader({
            runtimes: 'html5,flash,silverlight,html4', // 这里是说用什么技术引擎
            url: FileResourceURL, // 服务端上传路径
            max_file_size: MaxPicSize, // 文件上传最大限制。
            max_file_count: 1, //指示用户可以同时上传文件的最大数量
            chunk_size: 0, // 上传分块每块的大小，这个值小于服务器最大上传限制的值即可,0表示不启用分块。
            browse_button: 'btnSelect',//触发上传元素
            flash_swf_url: '/Scripts/plupload_2_1_2/Moxie.swf',
            silverlight_xap_url: '/Scripts/plupload_2_1_2/Moxie.xap',
            multi_selection: false,//	是否可以在文件浏览对话框中选择多个文件
            //附加参数
            multipart_params: {
                app: 'epm',
                crop: true
            },
            filters: {
                mime_types: [ //只允许上传图片和zip文件
                { title: "Image files", extensions: "jpg,png,jpeg,gif" }
                ],
                max_file_size: MaxPicSize, //最大只能上传400kb的文件
                prevent_duplicates: true //不允许选取重复文件
            },
            rename: false, // 是否重命名文件
            init: {
                PostInit: function () {
                    $('#btnUpload').click(function () {
                        if (uploader.files.length == 0) {
                            parent.layer.alert("请选择要上传的附件", { icon: 2 });
                        } else {
                            uploader.start();
                            return false;
                        }
                    });
                },
                FilesAdded: function (up, files) {
                    var type;
                    plupload.each(files, function (file) {
                        var typeList = ["jpg", "png", "jpeg", "gif"];
                        var fileType = File(typeList, file);
                        if (fileType) {
                            $('#fileList').html("");
                            //限定只能上传一个文件
                            if (files.length > 1) {
                                up.removeFile(files[0]);
                            }
                            plupload.each(files, function (file) {
                                $('#fileList').append('<div id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b></div>');
                            });
                        } else {
                            files.pop();
                            parent.layer.alert('上传文件类型仅支持"jpeg","jpg","png","gif"格式，请重新上传', { icon: 2 });
                        }
                    });
                },
                UploadProgress: function (up, file) {
                    $("#fileBar").show();
                    element.progress("fileProgress", file.percent + "%");
                },
                FileUploaded: function (uploader, file, responseObject) {
                    var data = JSON.parse(responseObject.response);
                    if (data.file) {
                        fileDataArray = [];
                        for (var i = 0; i < data.file.length; i++) {

                            var imgtype = getImageType(data.file[i].Name, data.file[i].Extension);
                            var imgurl = FileURL + data.file[i].VirtualURL;

                            if (!isThumbnailImage(imgtype)) {
                                var odiv = '<img src="' + imgurl + '" alt="Logo" id="ImgShow" style="width: 100px;height: 100px;" />';
                                $('#fileList').html(odiv);
                            }

                            setTimeout(function () {
                                $("#fileBar").hide();
                                element.progress("fileProgress", "0%");
                            }, 1500);

                            if (!data.flag) {
                                layer.alert("错误,请检查文件格式后重新上传！");
                                return;
                            }
                            parent.layer.msg("附件上传成功", { time: 1000, icon: 1 });
                            uploader.removeFile(file);

                            var obj = {};
                            obj.GuidId = file.id;
                            obj.Name = data.file[i].Name;
                            obj.Size = data.file[i].FileSize;
                            obj.FileGuid = data.file[i].Guid;
                            obj.Url = imgurl;
                            obj.ImageType = imgtype;

                            fileDataArray.push(obj);
                        }
                        fileDataJson = JSON.stringify(fileDataArray);
                        $("#fileDataJson").val(fileDataJson);
                    }
                },
                Error: function (up, err) {
                    if (err.code == -600) {
                        parent.layer.alert('仅支持' + MaxPicSize + '以内文件，请重新上传', { icon: 2 })
                    }
                    else if (err.code == -602) {
                        parent.layer.alert('不允许上传重复文件，请重新上传', { icon: 2 })
                    }
                    else {
                        parent.layer.alert("错误：" + err.code + ": " + err.message);
                    }
                }
            }
        });
        uploader.init();

        //关闭弹出iframe层
        $('.cancel').on("click", function () {
            var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
            parent.layer.close(index);//关闭窗口
        });
    });
</script>
